<template>
	<view class="viewport-container">
		<view class="MuiCollapse-container">
			<view class="pageLayout">
				<view class="heade">
					<view class="BrowserTitle">
						<view class="_-src-components-NewNavbar-BrowserTitle-language">
							‎中文(简体)‎
						</view>
						<view class="_-src-components-NewNavbar-BrowserTitle-flex_box">
							帮助
						</view>
					</view>
					<view class="BrowserTitle-title">
						小米帐号登录
					</view>
				</view>
			</view>
			<view class="_-src-components-Banner-root el-flex">
				<image src="../../static/images/tabBar/icon-header-logo.png" mode=""></image>
				<view class="_-src-components-Banner-slogan">
					让每个人都能享受科技的乐趣
				</view>
			</view>
		</view>
		<view class="_-src-components-CookieBanner-wrapper">
			<view class="components-PageLayout-pageLayout">
				<view class="form">
					<view class="from-item el-flex" :class="{focus:userF,hover:userH}">
						<input type="text" placeholder="邮箱/手机号码/小米ID" v-model="username" maxlength="11" @focus="userFocus"
							@blur="userBlur">
						<view class="icon">
							<template v-if="username!=''">
								<u-icon name="close-circle" size="26" @click="username=''"></u-icon>
							</template>
						</view>
					</view>
					<view class="miHelperText " v-if="userF">
						请输入账号
					</view>
					<view class="from-item el-flex" :class="{focus:passF,hover:passH}">
						<input :password="passwordType" placeholder="请输入密码" @focus="passFocus" @blur="passBlur"
							v-model="password">
						<view class="icon">
							<template v-if="passwordType">
								<u-icon name="eye" size="26" @click="passwordType=false"></u-icon>
							</template>
							<template v-else>
								<u-icon name="eye-fill" size="26" @click="passwordType=true"></u-icon>
							</template>
						</view>
					</view>
					<view class="miHelperText" v-if="passF">
						请输入登录密码
					</view>
					<view class="checkbox-item el-flex">
						<checkbox :checked="checked" @click='checked=!checked' />
						<text class="i">已阅读并同意小米帐号<text class="bule">用户协议</text> 和 <text class="bule">隐私政策</text></text>
					</view>
					<view class="btn-item">
						<view class="miui-btn-block-box">
							<button @click="submit" :class="{'btn-active':username!=''&&password!=''}">登录</button>
						</view>
					</view>
					<view class="bottom-item">
						<text>手机号登录</text>
						<text>｜</text>
						<text @click="toRegister">立即注册</text>
						<text>｜</text>
						<text>忘记密码？</text>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		encrypt,
		decrypt
	} from '../../utils/jsencrypt'
	export default {
		data() {
			return {
				userF: false,
				userH: false,
				passF: false,
				passH: false,
				checked: false,
				username: '',
				password: '',
				passwordType: true
			};
		},
		watch: {
			username(newVal) {
				if (newVal) {
					this.userF = false
					this.userH = true
				} else {
					this.userF = true
					this.userH = false
				}
			},
			password(newVal) {
				if (newVal) {
					this.passF = false
					this.passH = true
				} else {
					this.passF = true
					this.passH = false
				}
			},
		},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: '/pages/register-view/register-view'
				})
			},
			showToast() {
				let params = {
					type: 'default',
					message: "请你同意用户条款",
				}
				this.$refs.uToast.show({
					...params,
				})
			},
			submit() {
				if (this.password == '' && this.username == '') return;
				if (!this.checked) {
					this.showToast()
				} else {
					let username = encrypt(this.username)
					let password = encrypt(this.password)
					this.login(username, password)
				}
			},
			login(username, password) {
				let self = this
				uni.request({
					url: 'http://42.193.218.104:7744/api/userLogin',
					method: 'POST',
					data: {
						username: username,
						password: password
					},
					success: function(res) {
						if (res.data.code == 200) {
							uni.setStorageSync('USER_TOKEN', res.data.data)
							uni.setStorageSync('isLogin', 'yes')
							uni.showToast({
								title: '登录成功',
								icon: 'success',
								success() {
									let p = getCurrentPages()
									if (p.length == 1) {
										setTimeout(() => {
											uni.reLaunch({
												url:'/pages/home/home',
											})
										}, 500)
									} else {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1,
											})
										}, 500)
									}
								}
							})

						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						}
					},
					fail: function(err) {

					}
				})
			},
			userFocus() {
				if (!this.userF) {
					this.userH = true
				}
			},
			userBlur() {
				if (this.username == '') {
					this.userF = true
					this.userH = false
				} else {
					this.userF = false
					this.userH = false
				}
			},
			passFocus() {
				if (!this.passF) {
					this.passH = true
				}
			},
			passBlur() {
				if (this.password == '') {
					this.passF = true
					this.passH = false
				} else {
					this.passF = false
					this.passH = false
				}
			},
		}
	}
</script>

<style lang="scss">
	view {
		line-height: 1.15;
		box-sizing: border-box;
	}

	._-src-components-CookieBanner-wrapper {
		.components-PageLayout-pageLayout {
			padding: 0 .54rem .54rem;
			box-sizing: content-box;
			margin: 0 auto;
			max-width: 9.2rem;
			height: 100%;
			overflow-y: auto;

			.form {
				.checkbox-item {
					line-height: .38rem;

					.i {
						padding: 0 .15rem;
					}

					.bule {
						color: #0d84ff;
						font-size: .27rem;
						font-weight: 500;
						line-height: .36rem;
						margin: 0 .15rem;
						text-decoration: underline;
					}
				}

				/deep/.uicon-eye-fill,
				/deep/.uicon-eye,
				/deep/.uicon-close-circle {
					font-size: .42rem !important;
					line-height: .42rem !important;
				}

				.miHelperText {
					color: #f22424;
					padding: .077rem 0 .23rem .3rem;
					font-size: .27rem;
					font-weight: 400;
					line-height: .36rem;
				}

				.bottom-item {
					align-items: center;
					color: rgba(0, 0, 0, .5);
					display: flex;
					font-size: .27rem;
					justify-content: center;
					line-height: .36rem;
					margin-top: .38rem;

					text {
						font-size: .27rem;
						font-weight: 500;
						line-height: .36rem;
						color: rgba(0, 0, 0, .54);
					}
				}

				.btn-item {
					display: flex;
					justify-content: center;
					width: 100%;



					.miui-btn-block-box {
						width: 100%;

						button {
							word-wrap: break-word;
							border-radius: .69rem;
							display: inline-block;
							font-size: .33rem;
							overflow: hidden;
							font-weight: 500;
							line-height: .44rem;
							padding: .24rem .38rem;
							text-align: center;
							background-color: rgba(11, 132, 255, .3);
							color: hsla(0, 0%, 100%, .7);
							margin-top: .23rem;
							max-width: 6.45rem;
							width: 100%;
							cursor: not-allowed;
						}

						.btn-active {
							color: #fff;
							background: #0d84ff;
						}
					}
				}

				.from-item {
					margin: 0.077rem 0;
					background-color: rgba(0, 0, 0, .06);
					border: .038rem solid #fff;
					border-radius: .35rem;
					caret-color: #0d84ff;
					color: #000;
					display: inline-block;
					display: -ms-inline-flexbox;
					display: inline-flex;
					font-size: .35rem;
					font-weight: 500;
					line-height: .46rem;
					min-width: 0;
					outline: none;
					padding: .27rem;
					position: relative;
					transition: all .3s;
					width: 100%;

					input {
						background-color: transparent;
						border: none;
						border-radius: 0;
						line-height: .46rem;
						outline: none;
						padding: 0;
						caret-color: #0d84ff;
						color: #000;
						display: inline-block;
						font-size: .35rem;
						font-weight: 500;
						min-width: 0;
						position: relative;
						transition: all .3s;
						width: 100%;
					}
				}

				.focus {
					border: 0.038rem solid #f22424;
					outline-color: #f22424;
				}

				.hover {
					border: 0.038rem solid #0d84ff;
					outline-color: #0d84ff;
				}
			}
		}
	}
</style>